<!-- 用于在列表中展示一个员工或工人的头像、姓名、手机号等信息。 -->
<script setup lang="ts">
defineProps<{
  avatar?: string
  name: string
  identity: string
  phoneNumber: string
}>()

defineEmits(['call'])
</script>

<template>
  <view class="flex justify-between items-center p-30rpx bg-white">
    <view class="flex items-center">
      <image class="w-72rpx h-72rpx bg-#F8F8F8 rounded-full" :src="avatar || ''" />
      <Spacer width="12" />
      <view class="flex flex-col">
        <view class="flex items-center mb-12rpx">
          <view class="text-28rpx leading-28rpx text-secondary">
            {{ name }}
          </view>
          <Spacer width="12" />
          <view class="px-10rpx py-5rpx text-24rpx leading-24rpx text-brand bg-#FFEEE2 rounded-50rpx">
            {{ identity }}
          </view>
        </view>
        <view class="text-28rpx leading-28rpx text-secondary">
          {{ phoneNumber }}
        </view>
      </view>
    </view>
    <RGButton size="small" corner="small" @tap="$emit('call')">
      <image class="w-24rpx h-25rpx mr-10rpx" src="@/static/images/phone.png" />
      呼叫
    </RGButton>
  </view>
</template>
